<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单详情</title>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入Vue和Element UI的JS文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        .app-container {
            padding: 20px;
        }
        .form-header {
            margin: 20px 0;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        .step-title {
            text-align: center;
            font-size: 12px;
        }
        .my-div {
            margin: 20px 0;
        }
        .upload-file-uploader {
            margin-bottom: 5px;
        }
        .upload-file-list .el-upload-list__item {
            border: 1px solid #e4e7ed;
            line-height: 2;
            margin-bottom: 10px;
            position: relative;
        }
        .upload-file-list .ele-upload-list__item-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: inherit;
        }
        .ele-upload-list__item-content-action .el-link {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="app-container">
            <h4 class="form-header h4">车辆信息</h4>
            <el-form ref="soCars" :model="form" size="mini">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="数量（台）：">{{ soCars.carsNum }}</el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="单价（元）：">{{ soCars.soPrice }}</el-form-item>
                    </el-col>
                </el-row>
                <el-table :data="optionDatas" style="width: 100%">
                    <el-table-column prop="optionName" label="配置清单" width="300%" align="center">
                    </el-table-column>
                    <el-table-column prop="details" label="明细" width="1000%" align="center">
                    </el-table-column>
                </el-table>
            </el-form>

            <h4 class="form-header h4">基本信息</h4>
            <el-form ref="form" :model="form" size="mini">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="订单编号：">{{ form.soCode }}</el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="订单总价（元）：">{{ form.soAmount }}</el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="折扣：">{{ form.soRate }}</el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="税费（元）：">{{ form.taxAmount }}</el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="订单状态：">
                            <dict-tag :options="dict.type.so_status" :value="form.status"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="责任单位：">{{ form.responsibilityDept }}</el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="预计交付时间：">{{ form.expectedTime }}</el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="订单跟踪：">
                            <dict-tag :options="dict.type.so_progress" :value="form.soProgress"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="创建人：">{{ form.createBy }}</el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="创建时间：">{{ form.createTime }}</el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <h4 class="form-header h4">经销商信息</h4>
            <el-form ref="form" :model="form" size="mini">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="门店名称：">{{ form.dealerName }}</el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="门店联系人：">{{ form.contactName }}</el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="门店联系方式：">{{ form.contactPhone }}</el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="门店地址：">{{ form.dealerAddress }}</el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <h4 class="form-header h4">交付信息</h4>
            <el-form ref="form" :model="form" size="mini">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="交车经办人：">{{ form.deliverPerson }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="交车地点：">{{ form.deliverAddress }}</el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="预计交付时间：">{{ form.expectedTime }}</el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <h4 class="form-header h4">附件信息</h4>
            <el-form ref="form" :model="form" size="mini">
                <el-form-item label="订单附件" prop="attachmentAddress">
                    <file-upload
                        v-model="form.attachmentAddress"
                        :disabled="true"
                        :limit="5"
                        :file-size="5"
                        :file-type="['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf']"
                        :is-show-tip="true"
                    />
                </el-form-item>
            </el-form>
        </div>
    </div>

    <script>
        // 字典数据
        const dict = {
            type: {
                so_status: [
                    { value: "0", label: "草稿" },
                    { value: "1", label: "待审核" },
                    { value: "2", label: "已审核" },
                    { value: "3", label: "已驳回" }
                ],
                so_progress: [
                    { value: "1", label: "订单创建" },
                    { value: "2", label: "订单审核" },
                    { value: "3", label: "订单执行" },
                    { value: "4", label: "订单完成" }
                ]
            }
        }

        // 文件上传组件
        Vue.component('file-upload', {
            props: {
                value: [String, Object, Array],
                limit: {
                    type: Number,
                    default: 5
                },
                fileSize: {
                    type: Number,
                    default: 5
                },
                fileType: {
                    type: Array,
                    default: () => ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt", "pdf"]
                },
                isShowTip: {
                    type: Boolean,
                    default: true
                },
                disabled: {
                    type: Boolean,
                    default: false
                }
            },
            data() {
                return {
                    number: 0,
                    uploadList: [],
                    baseUrl: '/api', // 基础URL
                    uploadFileUrl: '/api/common/upload', // 上传文件服务器地址
                    headers: {
                        Authorization: "Bearer " + localStorage.getItem('token')
                    },
                    fileList: []
                }
            },
            watch: {
                value: {
                    handler(val) {
                        if (val) {
                            let temp = 1;
                            const list = Array.isArray(val) ? val : this.value.split(',');
                            this.fileList = list.map(item => {
                                if (typeof item === "string") {
                                    item = { name: item, url: item };
                                }
                                item.uid = item.uid || new Date().getTime() + temp++;
                                return item;
                            });
                        } else {
                            this.fileList = [];
                            return [];
                        }
                    },
                    deep: true,
                    immediate: true
                }
            },
            computed: {
                showTip() {
                    return this.isShowTip && (this.fileType || this.fileSize);
                }
            },
            methods: {
                handleBeforeUpload(file) {
                    if (this.fileType) {
                        const fileName = file.name.split('.');
                        const fileExt = fileName[fileName.length - 1];
                        const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
                        if (!isTypeOk) {
                            this.$message.error(`文件格式不正确，请上传${this.fileType.join("/")}格式文件!`);
                            return false;
                        }
                    }
                    if (file.name.includes(',')) {
                        this.$message.error('文件名不正确，不能包含英文逗号!');
                        return false;
                    }
                    if (this.fileSize) {
                        const isLt = file.size / 1024 / 1024 < this.fileSize;
                        if (!isLt) {
                            this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
                            return false;
                        }
                    }
                    this.number++;
                    return true;
                },
                handleExceed() {
                    this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
                },
                handleUploadError() {
                    this.$message.error("上传文件失败，请重试");
                },
                handleUploadSuccess(res, file) {
                    if (res.code === 200) {
                        this.uploadList.push({ name: res.fileName, url: res.fileName });
                        this.uploadedSuccessfully();
                    } else {
                        this.number--;
                        this.$message.error(res.msg);
                        this.$refs.fileUpload.handleRemove(file);
                        this.uploadedSuccessfully();
                    }
                },
                handleDelete(index) {
                    this.fileList.splice(index, 1);
                    this.$emit("input", this.listToString(this.fileList));
                },
                uploadedSuccessfully() {
                    if (this.number > 0 && this.uploadList.length === this.number) {
                        this.fileList = this.fileList.concat(this.uploadList);
                        this.uploadList = [];
                        this.number = 0;
                        this.$emit("input", this.listToString(this.fileList));
                    }
                },
                getFileName(name) {
                    if (name.lastIndexOf("/") > -1) {
                        return name.slice(name.lastIndexOf("/") + 1);
                    } else {
                        return name;
                    }
                },
                listToString(list, separator) {
                    let strs = "";
                    separator = separator || ",";
                    for (let i in list) {
                        strs += list[i].url + separator;
                    }
                    return strs != '' ? strs.substr(0, strs.length - 1) : '';
                }
            },
            template: `
                <div class="upload-file">
                    <el-upload
                        multiple
                        :action="uploadFileUrl"
                        :before-upload="handleBeforeUpload"
                        :file-list="fileList"
                        :limit="limit"
                        :on-error="handleUploadError"
                        :on-exceed="handleExceed"
                        :on-success="handleUploadSuccess"
                        :show-file-list="false"
                        :headers="headers"
                        class="upload-file-uploader"
                        ref="fileUpload"
                        v-if="!disabled"
                    >
                        <el-button size="mini" type="primary">选取文件</el-button>
                        <div class="el-upload__tip" slot="tip" v-if="showTip">
                            请上传
                            <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
                            <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
                            的文件
                        </div>
                    </el-upload>

                    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
                        <li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
                            <el-link :href="baseUrl + file.url" :underline="false" target="_blank">
                                <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
                            </el-link>
                            <div class="ele-upload-list__item-content-action">
                                <el-link :underline="false" @click="handleDelete(index)" type="danger" v-if="!disabled">删除</el-link>
                            </div>
                        </li>
                    </transition-group>
                </div>
            `
        })

        // 字典标签组件
        Vue.component('dict-tag', {
            props: {
                options: {
                    type: Array,
                    required: true
                },
                value: [Number, String, Boolean]
            },
            template: `
                <span>{{ getLabel() }}</span>
            `,
            methods: {
                getLabel() {
                    const item = this.options.find(item => item.value === this.value)
                    return item ? item.label : ''
                }
            }
        })

        new Vue({
            el: '#app',
            data() {
                return {
                    // 遮罩层
                    loading: true,
                    // 分页信息
                    total: 0,
                    pageNum: 1,
                    pageSize: 10,
                    form: {},
                    soCars: {},
                    optionDatas: [],
                    // 字典数据
                    dict: dict
                }
            },
            created() {
                // 从URL获取订单ID
                const urlParams = new URLSearchParams(window.location.search)
                const detailId = urlParams.get('id')

                if (detailId) {
                    this.loading = true
                    // 获取订单详情
                    axios.get('/api/system/order/' + detailId)
                        .then(response => {
                            this.form = response.data
                            this.loading = false
                        })

                    // 获取销售商品信息
                    axios.get('/api/system/order/soCars/' + detailId)
                        .then(response => {
                            this.soCars = response.data[0]
                            this.optionDatas = response.data[0].soOptionVo
                        })
                }
            }
        })
    </script>
</body>
</html>
